<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>tab切换菜单栏</title>
    <script src="../js/jquery-2.1.1.min.js"></script>
    <style>
        .menu{
            height: 50px;
            background-color: #eeeeee;
            line-height: 50px;
        }
        .menu .menu-item{
            float:left;
            border-right:1px solid red;
            color:#2F96B4;
            padding:0 20px;
            text-align:center;
        }
        .content{
            min-height:100px;
            border:1px solid #eeeeee;
        }
        .hide{
            display:none;
        }
        .active{
            background-color:brown;
        }

    </style>
</head>
<body>
    <div style="width:700px;margin:0 auto;">
        <div class="menu">
            <div class="menu-item active" a="1">菜单1</div>
            <div class="menu-item" a="2">菜单2</div>
            <div class="menu-item" a="3">菜单3</div>
        </div>
        <div class="content">
            <div b="1">内容1</div>
            <div b="2" class="hide">内容2</div>
            <div b="3" class="hide">内容3</div>
        </div>
    </div>
    <script>
        //方法一，以标签方式拼接
//        $('.menu-item').click(function(){
//            $(this).addClass('active').siblings().removeClass('active');
//            var target = $(this).attr('a')
//            $('.content').children("[b='" + target+"']").removeClass('hide').siblings().addClass("hide");
//        })

        //方法二，以索引位置方式
        $('.menu-item').click(function () {
            $(this).addClass('active').siblings().removeClass('active');
            $('.content').children().eq($(this).index()).removeClass('hide').siblings().addClass('hide');
        })
    </script>
</body>
</html>